<template>
	<div style="position: relative;">


		<div class="add_sku">
			<!-- <span>添加SKU</span> -->
			<i class="el-icon-circle-plus-outline " @click="drawer_add = true"></i>
			<i class="el-icon-remove-outline" @click="del_sku()"></i>
		</div>







		<el-drawer size='60%' title="新增SKU" :visible.sync="drawer_add" direction="btt">
			<!-- <div style="margin-left: 20px; font-weight: 800;">sKu名称:{{spu_name}}</div> -->

			<div>
				<span>请选择SPU</span>
				<el-autocomplete class="inline-input" v-model="spu_name" :fetch-suggestions="querySearch_spu"
					placeholder="请输入内容" @select="handleSelect_spu"></el-autocomplete>
			</div>

			<div>
				<span>请选择品牌</span>
				<el-autocomplete class="inline-input" v-model="brand_name" :fetch-suggestions="querySearch"
					placeholder="请输入内容" @select="handleSelect_brand"></el-autocomplete>
			</div>

			<div>
				<span>请选择单位</span>
				<el-autocomplete class="inline-input" v-model="unit_name" :fetch-suggestions="querySearch_unit"
					placeholder="请输入内容" @select="handleSelect_unit"></el-autocomplete>
			</div>


			<el-button type="primary" v-on:click='add_sku()' style="display: block; width: 80%; margin: 10px auto;">
				添加SKU</el-button>
		</el-drawer>



	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	import {
		add_sku_url,
		select_sku_url,
		select_all_spu_url,
		select_all_brand_url,
		select_all_unit_url,
		del_sku_url
	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: ['sku_id'],
		data() {
			return {
				spu_list: [],
				spu_id: '',
				spu_name: '',

				unit_list: [],
				unit_id: '',
				unit_name: '',

				brand_list: [],
				brand_id: '',
				brand_name: '',

				direction: 'ttb',
				drawer_one: false,
				drawer_two: false,
				drawer_add: false,
				now_sku_id: this.sku_id,


			}
		},
		methods: {

			del_sku() {
				if(this.now_sku_id == ''){
					Toast('请选择一个sku')
					return
				}
				// console.log(this.now_sku_id)
				
				this.$axios({
					method: 'POST',
					url: del_sku_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						sku_id: this.now_sku_id,
				
					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						
						this.$notify({ type: 'success', message: '删除成功' });
						
						this.$emit('deleteSku', true)
				
						
					} else {
						// console.log(response.data.errorMsg)
						this.$notify({ type: 'error', message: '危险删除，如确需删除请联系系统管理员，具体原因：' + response.data.errorMsg });
					}
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
				
			},

			add_sku() {

				if (this.brand_id === '' || this.spu_id === '' || this.unit_id === '') {

					this.$message({
						message: '请输入完整的参数' + '!!!',
						type: 'error'
					})

					return

				}

				// console.log('shadiao')
				this.$axios({
					method: 'GET',
					url: add_sku_url,
					params: {
						spu_id: this.spu_id,
						brand_id: this.brand_id,
						unit_id: this.unit_id
					}
				}).then((response) => { //这里使用了ES6的语法

					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg + '!!!',
							type: 'error'
						})

						return
					}

					this.$message({
						message: 'SKU添加成功，请添加对应的属性，正式完SKU添加!!!',
						type: 'success'
					})
					setTimeout(

						() => {
							location.reload()
						}, 2000

					)

				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			//获取所有spu
			get_all_spu() {

				this.$axios({
					method: 'GET',
					url: select_all_spu_url,
				}).then((response) => { //这里使用了ES6的语法

					this.spu_list = response.data.resultBody.reverse()
					for (var i = 0; i < this.spu_list.length; i++) {
						this.spu_list[i]['value'] = this.spu_list[i]['spu_name']
					}
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			//获取所有unit

			get_all_unit() {
				this.$axios({
					method: 'GET',
					url: select_all_unit_url,
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.unit_list = response.data.resultBody.reverse()
					for (var i = 0; i < this.unit_list.length; i++) {
						this.unit_list[i]['value'] = this.unit_list[i]['unit_name']
					}
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			//获取所有brand

			get_all_brand() {
				this.$axios({
					method: 'GET',
					url: select_all_brand_url,
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					let brand_list
					brand_list = response.data.resultBody.reverse()
					for (var i = 0; i < brand_list.length; i++) {
						brand_list[i]['value'] = brand_list[i]['brand_name']
					}
					// console.log(brand_list)
					this.brand_list = brand_list

				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			//brand下拉函数

			querySearch(queryString, cb) {
				var brand_list = this.brand_list;
				var results = queryString ? brand_list.filter(this.createFilter(queryString)) : brand_list;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (brand_list) => {
					// console.log(brand_list.brand_name)
					return (brand_list.brand_name.indexOf(queryString) === 0);
				};
			},

			handleSelect_brand(item) {
				// console.log(this.state1)
				// console.log(item);
				this.brand_id = item['id']
			},

			//unit下拉函数

			querySearch_unit(queryString, cb) {
				var unit_list = this.unit_list;
				var results = queryString ? unit_list.filter(this.createFilter_unit(queryString)) : unit_list;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter_unit(queryString) {
				return (unit_list) => {
					// console.log(unit_list.unit_name)
					return (unit_list.unit_name.indexOf(queryString) === 0);
				};
			},

			handleSelect_unit(item) {
				// console.log(this.state1)
				// console.log(item);
				this.unit_id = item['id']
			},

			//spu下拉函数

			querySearch_spu(queryString, cb) {
				var spu_list = this.spu_list;
				var results = queryString ? spu_list.filter(this.createFilter_spu(queryString)) : spu_list;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter_spu(queryString) {
				return (spu_list) => {
					// console.log(unit_list.unit_name)
					return (spu_list.spu_name.indexOf(queryString) === 0);
				};
			},

			handleSelect_spu(item) {
				// console.log(this.state1)
				// console.log(item);
				this.spu_id = item['id']
			}


		},
		computed: {},
		watch: {
			sku_id: function(val, oldVal) {
				// console.log(val)
				console.log('new: %s, old: %s', val, oldVal)
				this.now_sku_id = val

			}
		},
		created() {},
		mounted() {
			this.get_all_spu()
			this.get_all_unit()
			this.get_all_brand()
		},


	}
</script>

<style scoped lang="less">
	.one,
	.two {
		width: 50%-0.5px;
		display: inline-block;
	}

	.one {
		// border-right: 0.5px solid black;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.two {
		// border-left: 0.5px solid black;
		position: absolute;
		right: 0px;
		top: 0px;
	}


	.header {
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
		background-color: floralwhite;
	}

	.item {
		position: relative;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		// background-color: #F0F0F0;
		border-bottom: 0.5px solid #F0F0F0;

		span {
			padding-left: 10px;
		}

		i {
			position: absolute;
			display: block;
			right: 15px;
			top: 10px;
			color: orangered;
		}

	}

	.active {
		background-color: orange;
		color: white;
	}

	.add_sku {

		height: 50px;
		width: 50px;
		position: fixed;
		font-size: 50px;
		right: 5px;
		top: 60%;
		color: red;
	}

	.el-drawer {
		div {
			margin: 10px;
		}
	}
</style>
